<template>
  <div class="Backstage3managePage">
    <el-container>
      <el-header style="margin-bottom: 90px;">
        <el-row style="height: 80px">
          <el-col :span="18" style="width: 950px">
            <div class="grid-content bg-purple" style="bottom:0px; padding:0px;">
              <h1 style="margin-right: 20px; margin-top:30px; font-size: xx-large; ">分布式供应链管理与验证平台-供应链变更效应传播可视化系统</h1>

            </div></el-col>
          <el-col :span="10">
            <div class="grid-content bg-purple-light">
              <div id="nav">
                <router-link to="/login">退出登录</router-link>
              </div>
            </div></el-col>
        </el-row>
        <el-divider ></el-divider>
      </el-header>
      <el-container>
        <el-aside width="220px" style="height: 650px">
          <!--          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">-->
          <!--            <el-radio-button :label="false">展开</el-radio-button>-->
          <!--            <el-radio-button :label="true">收起</el-radio-button>-->
          <!--          </el-radio-group>-->
          <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">

            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title" style="font-size: 18px; font-weight: bold; ">子系统</span>
              </template>
              <!--              <el-menu-item-group>-->
              <el-menu-item style="font-size: 12px; font-weight: bolder; color: #708090; text-align:center; "
                            index="1-1" @click="gostage1()" :disabled="isDisabledOne">知识图谱</el-menu-item>
              <el-menu-item style="font-size: 12px; font-weight: bolder; color: #708090; text-align:center;"
                            index="1-2" @click="gostage2()" :disabled="isDisabledTwo">供应链变更效应传播仿真系统</el-menu-item>
              <el-menu-item style="font-size: 12px; font-weight: bolder; color: #708090; text-align:center;"
                            index="1-3" @click="gostage3()" :disabled="isDisabledThree">供应链变更辅助决策支持系统</el-menu-item>
              <el-menu-item style="font-size: 12px; font-weight: bolder; color: #708090; text-align:center;"
                            index="1-4" @click="gostage4()" :disabled="isDisabledFour">供应链变更效应传播可视化系统</el-menu-item>
              <!--              </el-menu-item-group>-->

            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title" style="font-size: 18px; font-weight: bold">用户管理</span>
              </template>
              <el-menu-item-group>
                <span slot="title">用户基本信息统计</span>
                <el-menu-item index="2-1" style="font-size: 14px; font-weight: bolder; color: #708090; text-align:center;" @click="goCustom()">用户基本信息更改</el-menu-item>
                <el-menu-item index="2-2" style="font-size: 14px; font-weight: bolder; color: #708090; text-align:center;" @click="goSearch()">用户基本信息查询</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="用户权限管理">

                <el-menu-item index="2-4" style="font-size: 14px; font-weight: bolder; color: #708090; text-align:center;"
                              @click="goCustomLimit()">用户权限变更</el-menu-item>
              </el-menu-item-group>
              <!--              <el-submenu index="1-4">-->
              <!--                <span slot="title">权限管理</span>-->
              <!--                <el-menu-item index="1-4-1">选项1</el-menu-item>-->
              <!--                <el-menu-item index="1-4-2">选项1</el-menu-item>-->
              <!--                <el-menu-item index="1-4-3">选项1</el-menu-item>-->
              <!--                <el-menu-item index="1-4-4">选项1</el-menu-item>-->
              <!--              </el-submenu>-->
            </el-submenu>

            <!--            <el-menu-item index="3" disabled>-->
            <!--              <i class="el-icon-document"></i>-->
            <!--              <span slot="title">导航三</span>-->
            <!--            </el-menu-item>-->
            <el-menu-item index="3">
              <i class="el-icon-setting"></i>
              <span slot="title" style="font-size: 18px; font-weight: bold" @click="goCustomlogin()">用户详情</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); text-align: left; border: 1px dotted black; width: 50%;">
          <div style="font-size: 20px; font-weight: bolder; color: #708090;"><i class="el-icon-s-fold" ></i> 供应链变更效应传播可视化系统</div>
          <br />
          <br />
          <div style="text-align: center;">
            <img src="../assets/img/backstagemanage/3.png" style="width: 800px"/>
          </div>


        </el-main>

      </el-container>
    </el-container>

  </div>
</template>

<script>

import TopBar from "@/components/commons/TopBar";

export default {
  name: "Backstage3managePage",
  data() {
    return {
      isDisabledOne: true,
      isDisabledTwo: true,
      isDisabledThree: true,
      isDisabledFour: true,
      isCollapse: false
    };
  },
  created() {
    this.loginLimit();
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    goCustomLimit() {
      this.$router.push({
        path: "/CustomerLimitSearchPage",
        query: {
          username: this.$route.query.username
        }
      })
    },
    goCustom() {
      this.$router.push({
        path: "/CustomermanagePage",
        query: {
          username: this.$route.query.username
        }
      })
    },
    goSearch() {
      this.$router.push({
        path: "/CustomerSearchPage",
        query: {
          username: this.$route.query.username
        }
      })
    },
    goCustomlogin() {
      this.$router.push({
        path: "/CustomerLoginPage",
        query: {
          username: this.$route.query.username
        }
      })
    },
    gostage1() {
      this.$router.push({
        path: "/BackstagemanagePage",
        query: {
          username: this.$route.query.username
        }

      })
    },
    gostage2() {
      this.$router.push({
        path: "/Backstage2managePage",
        query: {
          username: this.$route.query.username
        }
      })
    },
    gostage3() {
      this.$router.push({
        path: "/Backstage3managePage",
        query: {
          username: this.$route.query.username
        }
      })
    },
    gostage4() {
      this.$router.push({
        path: "/Backstage4managePage",
        query: {
          username: this.$route.query.username
        }
      })
    },

    loginLimit() {
      if(this.$route.query.username == 'user2') {
        this.isDisabledTwo = false;
      } else if(this.$route.query.username == 'user1') {
        this.isDisabledOne = false;
      } else if(this.$route.query.username == 'user3') {
        this.isDisabledThree = false;
      } else if(this.$route.query.username == 'user4') {
        this.isDisabledFour = false;
      } else if(this.$route.query.username == 'user5') {
        this.isDisabledOne = false;
        this.isDisabledTwo = false;
        this.isDisabledThree = false;
        this.isDisabledFour = false;
      }
    }

  }


}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>